<template>
  <el-container class="main_con">
    <ufrom @submit="saveData" ref="ufrom">
      <el-form size="medium" label-width="100px">
        <div class="setting_body_item">
          <div class="header">分享设置</div>
          <div class="conetnt edit_con">
            <div class="edit_content">
              <el-form-item label="分享标题">
                <el-radio-group v-model="obj.configuration.title">
                  <el-radio :label="0">商城名称</el-radio>
                  <el-radio :label="1">自定义名称</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="obj.configuration.title == 1">
                <div class="fks"><el-input v-model="obj.configuration.custom_title" style="width:360px;" placeholder="请输入自定义名称"></el-input></div>
              </el-form-item>
              <el-form-item label="分享图标">
                <el-radio-group v-model="obj.configuration.logo">
                  <el-radio :label="0">商城logo</el-radio>
                  <el-radio :label="1">自定义logo</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="obj.configuration.logo == 1">
                <div class="fks">
                  <div style="width:100px;height:100px;"><Upload :tempUrl="obj.configuration.custom_logo" @input="getImage($event, 'custom_logo')"></Upload></div>
                  <div style="color:#909399;font-size:12px;">建议尺寸800*800像素</div>
                </div>
              </el-form-item>
              <el-form-item label="分享描述">
                <el-radio-group v-model="obj.configuration.describe"><el-radio :label="1">自定义描述</el-radio></el-radio-group>
              </el-form-item>
              <el-form-item v-if="obj.configuration.describe == 1">
                <div class="fks">
                  <el-input type="textarea" rows="4" v-model="obj.configuration.custom_describe" style="width:360px;" placeholder="请输入自定义描述"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="分享链接">
                <el-radio-group v-model="obj.configuration.share_url">
                  <el-radio :label="0">商城首页</el-radio>
                  <el-radio :label="1">自定义链接</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="obj.configuration.share_url == 1">
                <el-input disabled v-model="linkdata.link" placeholder="请选择链接地址" style="width:360px;">
                  <template slot="append">
                    <span @click="selectlink">选择链接</span>
                  </template>
                </el-input>
                <!-- <div class="" style="width: 300px;" @click="selectlink"><Linkdiv :linkdata="linkdata.link" ></Linkdiv></div> -->

              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
    </ufrom>
    <el-dialog class="selectlink" title="链接选择器" :visible.sync="drawer" destroy-on-close width="800px">
      <SelectLink ref="selectlink" :linktype="linktype" :linkdata="linkdata" @changelink="changelink"></SelectLink>
    </el-dialog>
  </el-container>
</template>

<script>
import SelectLink from '@/components/SelectLink/index';
import Upload from '@/components/Upload/SingleImage2';
import {addSiteConfig, editSiteConfig, getSiteConfig} from '@/api/mall/setting';
import Linkdiv from '@/components/Link/index';

export default {
  data() {
    return {
      obj: {
        type: 'mallShare',
        status: 1,
        configuration: {
          title: 0,
          custom_title: '',
          logo: 0,
          custom_logo: '',
          describe: 1,
          custom_describe: '',
          share_url: 0,
          custom_share_url: ''
        }
      },
      linkdata: {
        link: '',
        type: 1
      },
      linktype: ['1', '2', '3', '4', '5', '6', '7'],
      drawer: false
    };
  },
  components: {
    Upload,
    SelectLink,
    Linkdiv
  },
  mounted() {
    this.getConfig('mallShare');
  },
  methods: {
    //选择链接
    selectlink() {
      this.drawer = true;
      this.$nextTick(() => {
        this.$refs.selectlink.init();
      });
    },
    changelink(data) {
      if (data.type != 6) {
        this.linkdata = data;
        this.obj.configuration.custom_share_url = data.link;
      } else {
        let link = data.link;
        if (data.id == 1) {
          this.linkdata.link = link.link;
          this.obj.configuration.custom_share_url = link.link;
        } else if (data.id == 3) {
          this.linkdata.link = link.pages;
          this.obj.configuration.custom_share_url = link.pages;
        } else {
          this.linkdata.link = link.mobile;
          this.obj.configuration.custom_share_url = link.mobile;
        }
      }

      this.drawer = false;
    },
    //获取图片
    getImage(val, tag) {
      this.obj.configuration[tag] = val;
    },
    //获取站点配置数据
    getConfig(type) {
      getSiteConfig(type)
        .then(res => {
          if (res.msg) {
            this.obj = res.msg;
            this.linkdata.link = this.obj.configuration.custom_share_url;
          }
        })
        .catch(e => {
        });
    },
    //保存数据
    saveData() {
      this.isLoading = true;
      if (this.obj.update_time) {
        //更新
        editSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init()
            this.getConfig('mallShare');
          })
          .catch(e => {
            this.$refs.ufrom.init()
          });
      } else {
        //新增
        addSiteConfig(this.obj)
          .then(res => {
            this.$refs.ufrom.init()
            this.getConfig('mallShare');
          })
          .catch(e => {
            this.$refs.ufrom.init()
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>

//灰色框
.fks {
  background: #f4f6f8;
  //width: 500px;
  padding: 20px;
  color: #606266;
}

</style>
